<template>
	<view class="cake-list flex flex-wrap justify-between">
		<CakeItem  v-for="item in cakeList" :gdata="item"/>
	</view>
	<view class="padding text-center text-gray" v-if="finished">
		没有更多了
	</view>
</template>

<script setup>
import {onLoad,onReachBottom} from '@dcloudio/uni-app'
import { ref } from "vue";
import { cakeGet } from '../../api/cake';
import CakeItem from '../../components/cake-item.vue'
import {$http} from '../../utils/http.js'
const cakeList = ref([])
let page = 1
const finished = ref(false)
// 首屏列表
cakeGet().then(res=>{
	cakeList.value = res.data.results
	page++
})
// 触底
onReachBottom(()=>{
	console.log('触底了');
	if(finished.value){ return } 
	cakeGet(page).then(res=>{
		let {results} = res.data
		if(results.length){
			cakeList.value = [
				...cakeList.value,
				...results
			]
			page++
		}
		if(results.length<8){
			finished.value = true
		}
	})
})
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.cake-list{
	padding: 15upx;
}

</style>
